<template>
  <div id="app">
    <TopBar  :key="TopBarkey"/>
   <Header/>
    <router-view @topBarKey="unTopBarKey"/>
    <Footer/>
    <Login v-show="isLoginShow"></Login>
    <transition name="slide">
      <Toast v-show="isShowToast"/>
    </transition>
    
  </div>
</template>
<script>
import Header from "@/components/Header.vue"
import Footer from "@/components/Footer.vue"
import TopBar from "@/components/TopBar.vue"
import Login from "@/components/Login.vue"
import Toast from "@/components/Toast.vue"
// import Home from "@/components/Home.vue"
// import axios from "axios"
import {createNamespacedHelpers, mapState} from 'vuex'

export default{
  components: {
    Header,Footer,TopBar,Login,Toast,
  },
  computed:{
    ...mapState({
      // 属性：state =>state.模块名称.属性名
      isLoginShow:(state)=>state.showModal.isLoginShow,
      isShowToast:(state)=>state.showToast.isShowToast

    })
  },
  data(){
    return {
      TopBarkey:0
    }
  },
  watch:{
    "$route.path":{
      handler(newVal,oldVal){
        if(newVal != oldVal){
          this.TopBarkey++
        }
      }
    }
  },
  methods:{
    unTopBarKey(){
      this.TopBarkey++
    }
  },
  created(){
    // 获取配置文件中的属性process.env.属性名
 console.log("配置值为：",process.env.VUE_APP_MY_TEXT);
 console.log("配置值为：",process.env.VUE_APP_BASE_URL);
  }
}
</script>

<style lang="less">
#app{
  // background-color: red;

}
/* 入场的起始状态 = 离场的结束状态 */
.slide-enter, .slide-leave-to{
  opacity: 0;
}

.slide-enter-active, .slide-leave-active{
  transition: opacity .3s linear;
}

.slide-enter-to, .slide-leave{
  opacity: 1;
}
</style>
